<!-- 发布 -->
<template>
	<view>
		<view class="itemone">
			<u-form class="itemwidth" :model="form" ref="uForm"
				:label-style="{'font-size':'24rpx','color':'rgba(56, 56, 56, 1)','height':'30rpx'}">
				<u-form-item>
					<addressSelect></addressSelect>
				</u-form-item>
				<u-form-item label="商品名" label-width='100' class="uform" prop="varieties">
					<u-input placeholder="请输入商品名" v-model="form.varieties" type="text" height="30"
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
				<u-form-item label="种类" class="uform" label-width='100' prop="type">
					<u-input placeholder="请输入种类" v-model="form.type" type="text" height="30"
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
				<u-form-item label="重量" class="uform" label-width='100' prop="kilogram">
					<u-input placeholder="请输入重量" v-model="form.kilogram" type="text" height="30"
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
				<u-form-item label="价格" class="uform" label-width='100' prop="price">
					<u-input placeholder="请输入预期价格" v-model="form.price" type="text" height="30"
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
				<u-form-item label="备注" label-width='100' label-position="left" prop="remarks">
					<u-input placeholder="其他说明" v-model="form.remarks" type="textarea" :auto-height='autoHeight'
						placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" />
				</u-form-item>
				<!-- <u-form-item label="有无期限" class="uform" label-width="200">
					<u-switch activeColor="rgba(255, 87, 51, 1)" v-model="switchVal" asyncChange @change="asyncChange"
						size="40">
					</u-switch>
				</u-form-item> -->
				<u-form-item label="截止时间" label-width="200" class="uform">
					<view class="date_input" @click="show = true">
						<u-datetime-picker :show="show" v-model="value1" ref="datetimePicker" :formatter="formatter"
							mode="datetime" @confirm="confirm" @cancel="cancel()">
						</u-datetime-picker>
						<u-input placeholder="请选择日期" v-model="form.delivery_time" type="text"
							placeholder-style="color:rgba(166, 166, 166, 1);font-size:20rpx" disabled />
					</view>
				</u-form-item>
				<u-form-item label="商品图片" label-width="200" class="uform">
					<u-upload @afterRead="afterRead" @delete="deletePic" name="1" :multiple="true" :maxCount="1"
						:previewFullImage="true" :fileList="tempImageList" width="200" height="200" uploadText='请放入图片'>
					</u-upload>
				</u-form-item>
			</u-form>
		</view>
		<Agreement v-model="checked" name="产品发布免责声明" :type="agreementType.disclaimer"/>
		<button class="send_button" @click="submit()">{{buttontext}}</button>
		<view class="screenheight"></view>
		<u-popup v-model="show" mode="center" border-radius="14" closeable></u-popup>
	</view>
</template>

<script>

	import addressSelect from 'components/address/addressSelect.vue'
	import Agreement from 'components/agreement'
	import {
		uploadDemandImg
	} from 'apis/file';
	import goodsRules from 'utils/verify/goodsRules';
	import {agreementType} from "utils/enums/agreement"
	import {
		releaseDemand,
	} from 'apis/farmer/need.js';
	import {
		mapGetters
	} from "vuex"

	const dateTypeOption = {
		year: '年',
		month: '月',
		day: '日'
	}

	export default {
		components: {
			addressSelect,
			Agreement
		},
		data() {
			return {
				// sec: false,
				agreementType,
				checked: [],
				addressId: null, // 地址id
				showModifyArea: false,
				show: false,
				value1: Number(new Date()),
				autoHeight: true,
				tempImageList: [], // 临时图片路径，用于预览图片
				form: {
					varieties: '', // 品名
					type: '', // 种类
					kilogram: '', //重量
					// name: '', //联系人
					// phone: '', //电话
					price: '', //预期价格
					// address: '', //收货地址地区
					// detail_address: '', //详细地址
					remarks: '', // 备注
					delivery_time: '', //交货时间
					images: [], //图片
					// status: 0, // 商品状态
					// goodsNewTime: '', //预售时间
				},
				rules: goodsRules,
				buttontext: '发布',
			}
		},
		computed: {
			...mapGetters({
				getDefaultAddress: "getDefaultAddress"
			})
		},
		methods: {
			// getDefaultAddressId(id) {},
			//时间选择器
			confirm(e) {
				this.show = false;
				const timeFormat = uni.$u.timeFormat;
				this.form.delivery_time = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
			},
			cancel() {
				this.show = false;
			},
			formatter(type, value) {
				const newType = dateTypeOption[type]
				return newType ? value + newType : value
			},
			// asyncChange(i) {
			// 	uni.showModal({
			// 		content: i ? '要设定截止时间吗？' : '不设定截止时间吗？',
			// 		success: (res) => {
			// 			if (res.confirm) {
			// 				this.switchVal = i
			// 				// this.sec = i;
			// 				this.form.delivery_time = ''
			// 			}
			// 		}
			// 	})
			// },
			// 删除图片
			deletePic(event) {
				this.tempImageList.pop()
			},
			// 新增图片
			async afterRead(event) {
				const that = this
				const lists = event.file
				that.tempImageList = [{
					url: lists[0].url,
					status: 'uploading',
					message: '上传中'
				}]
				const result = await uploadDemandImg(that.tempImageList[0].url)
				const {
					code,
					data
				} = JSON.parse(result)
				Object.assign(that.tempImageList[0], {
					status: code === 200 ? 'success' : 'error',
					message: code === 200 ? "上传成功" : "上传失败",
					url: code === 200 ? data[0] : that.tempImage.url
				})
			},
			submit() {
				if (!this.checked.length) return this.$errorMsg('请阅读并勾选免责声明')
				if (this.form.delivery_time == '') return this.$errorMsg("截止时间不能为空");
				// this.form.status = +this.switchVal
				// if (this.tempImageList.length === 0) return this.$errorMsg("请上传一张图片");
				// let contactInfoId = userAddress.data[0].contactInfoId;
				// let productionArea = "贵州省长顺县";
				let marketTime = this.form.delivery_time + ':00';
				let data = {
					'demandVariety': this.form.varieties, //品名
					'demandSpecies': this.form.type, //种类
					'demandRemark': this.form.remarks, //备注
					'demandPrice': this.form.price, //单价
					'demandWeight': this.form.kilogram, //重量
					'contactInfoId': this.addressId ? this.addressId : this.getDefaultAddress['id'], //发布人信息
					// 'productStatus': this.switchVal, //状态
					'expirationDate': marketTime, //截止时间
					// 从临时地址中读取图片列表
					'demandCover': this.tempImageList[0]?.url || "https://img.js.design/assets/img/62515ad1785241ce1ce9f20f.jpg"
				}
				this.$refs.uForm.validate().then(async () => {
					
					console.table(data)
					const {
						code,
						msg
					} = await releaseDemand(data)
					if (code !== 200) return this.$errorMsg(msg);
					this.$successMsg("发布成功")
					setTimeout(this.goback, 1000)
				})
			}
		},
		onReady() { //生命周期
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>
<style>
	@import url("sends_need.css");
</style>
